<template>
	<div class="content">
		<div class="head">
			<div class="line"></div>
			<div class="headTitle">{{ $t('ivcs.customerinfo') }}</div>
		</div>
		<div class="customerinfo">
			<ul class="input-ul">
				<li>
					<span>{{ $t('ivcs.name') }}：</span>
					<span v-if="customerSubmitInfo.name">{{ customerSubmitInfo.name }}</span>
					<span v-else>--</span>
				</li>
				<li>
					<span>{{ $t('ivcs.mobile') }}：</span>
					<span v-if="customerSubmitInfo.mobile">{{ customerSubmitInfo.mobile }}</span>
					<span v-else>--</span>
				</li>
				<li>
					<span>{{ $t('ivcs.category') }}：</span>
					<span v-if="customerSubmitInfo.productCategory">{{ customerSubmitInfo.productCategory }}</span>
					<span v-else>--</span>
				</li>
				<li>
					<span>{{ $t('ivcs.idcard') }}：</span>
					<span v-if="customerSubmitInfo.ID">{{ customerSubmitInfo.ID }}</span>
					<span v-else>--</span>
				</li>
				<li>
					<span>{{ $t('ivcs.location') }}：</span>
					<p v-if="customerLocaltion">{{ customerLocaltion }}</p>
					<span v-else>--</span>
				</li>
			</ul>
		</div>
		<div class="head">
			<div class="line"></div>
			<div class="headTitle">{{ $t('ivcs.customerfile') }}</div>
		</div>
		<div class="file">
			<div class="op">
				<div class="filetitle" @click="collectCustomerInfo">{{ $t('ivcs.collectinfo') }}</div>
				<!-- <div class="ct1" style="text-align: center;width: 90%;margin-top: 20px">{{ $t('ivcs.customerpic') }}</div> -->
				<!-- <div class="filetitle" @click="getFormData">{{ $t('ivcs.getform') }}</div> -->
				<Modal v-model="showFormView" :closable="false" :mask-closable="false">
					<p slot="header">
						<span style="color: #333333;font-size: 15px">{{ $t('ivcs.formcontent') }}</span>
					</p>
					<div v-for="(item, index) in formField" :key="index">
						<div>{{ item.name }}</div>
						<Input v-model="item.content" :placeholder="item.name" style="width: 98%;margin-top: 10px" readonly=""></Input>
					</div>
					<div slot="footer">
						<Button type="info" size="default" class="icbc_defaultbackColor" @click="showFormView = false">{{ $t('ivcs.Yes') }}</Button>
					</div>
				</Modal>
			</div>
			<div class="pic" v-show="showAllImages">
				<div class="icon" @click="showPic(1)" :class="customerSubmitInfo ? 'allow' : 'disabled'">
					<span class="pic_t" v-show="!customerSubmitInfo || !customerSubmitInfo.frontPhoto">{{ $t('pic.front') }}</span>
					<img v-if="customerSubmitInfo" :src="customerSubmitInfo.frontPhoto" preview="1" width="100%" height="100%" class="userImage" />
				</div>
				<div class="icon" @click="showPic(2)" :class="customerSubmitInfo ? 'allow' : 'disabled'">
					<span class="pic_t" v-show="!customerSubmitInfo || !customerSubmitInfo.backPhoto">{{ $t('pic.back') }}</span>
					<img v-if="customerSubmitInfo" :src="customerSubmitInfo.backPhoto" preview="1" width="100%" height="100%" class="userImage" />
				</div>
				<div class="icon" @click="showPic(3)" :class="customerSubmitInfo ? 'allow' : 'disabled'">
					<span class="pic_t" v-show="!customerSubmitInfo || !customerSubmitInfo.bankCardPhoto">{{ $t('pic.bank') }}</span>
					<img v-if="customerSubmitInfo" :src="customerSubmitInfo.bankCardPhoto" preview="1" width="100%" height="100%" class="userImage" />
				</div>
				<div class="icon" @click="showPic(4)" :class="customerSubmitInfo ? 'allow' : 'disabled'">
					<span class="pic_t" v-show="!customerSubmitInfo || !customerSubmitInfo.selfie">{{ $t('pic.self') }}</span>
					<img v-if="customerSubmitInfo" :src="customerSubmitInfo.selfie" preview="1" width="100%" height="100%" class="userImage" />
				</div>
			</div>
			<div v-show="!showAllImages" @click="showBig()">
				<div class="iconone" id="show_big_image">
					<img v-if="showimage" :src="showimage" preview="1" width="100%" height="100%" class="bigimage" />
				</div>
				<div class="op-btn">
					<div class="opbtn" @click="showAllImages = true">{{ $t('ivcs.back') }}</div>
					<div class="opbtn" @click="collectCustomerImage()">{{ $t('ivcs.collectimg') }}</div>
					<div class="opbtn" @click="picOcr()">{{ $t('pic.ocr') }}</div>
				</div>
			</div>
		</div>

		<div class="head" id="workflow">
			<div class="line"></div>
			<div class="headTitle">{{ $t('ivcs.workflow') }}</div>
		</div>

		<div id="workflow_content" class="workflow_content">
			<workflow-step :sessionId="sessionId" :bizScenarioId="bizScenarioId" ref="workflowStep"></workflow-step>
		</div>

		<!--OCR识别结果-->
		<Modal v-model="showOcrView" :closable="false" :mask-closable="false" :title="$t('pic.ocrResponse')">
			<o-c-r :data="ocrData"></o-c-r>
			<div slot="footer">
				<Button type="default" size="default" @click="showOcrView = false">{{ $t('ivcs.close') }}</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import { ocrPicture, uploadFileWithFormData, getImageByUrl } from '../api/api';
import OCR from './Toast/OCR';
import WorkflowStep from './WorkflowStep';
export default {
	name: 'AILeft',
	components: { WorkflowStep, OCR },
	props: ['data', 'formdata', 'customerData', 'customerLocaltion', 'sessionId', 'bizScenarioId'],

	data() {
		return {
			showOcrView: false,
			showFormView: false,
			formField: [],
			showAllImages: true,
			showimage: null,
			images: [],
			index: 0,
			formcontent: this.$t('ivcs.formcontent'),
			yes: this.$t('ivcs.Yes'),
			close: this.$t('ivcs.close'),
			ocrData: null,
			customerSubmitInfo: this.$store.state.customerSubmitInfo
		};
	},
	computed: {
		getcustomerSubmitInfo() {
			return this.$store.state.customerSubmitInfo;
		}
	},
	watch: {
		/**
		 * 监听customerSubmitInfo的变化
		 */
		getcustomerSubmitInfo(val) {
			this.customerSubmitInfo = val;
		}
	},
	methods: {
		/**
		 * 保存workflowStep
		 **/
		saveWorkflowStep(sessionId) {
			return this.$refs.workflowStep.saveWorkflowStep(sessionId);
		},

		/*收集访客信息*/
		collectCustomerInfo() {
			this.$emit('collectCustomerInfo');
		},

		/*获取客户提交的表单信息*/
		getFormData() {
			this.$emit('getFormData');
		},

		/*大图预览*/
		showPic(index) {
			if (this.data) {
				if (index == 1) {
					this.showimage = this.data.frontPhoto;
				} else if (index == 2) {
					this.showimage = this.data.backPhoto;
				} else if (index == 3) {
					this.showimage = this.data.bankCardPhoto;
				} else if (index == 4) {
					this.showimage = this.data.selfie;
				}
				this.showAllImages = false;
				this.index = index - 1;
				this.images = [];
				this.images.push(this.data.frontPhoto);
				this.images.push(this.data.backPhoto);
				this.images.push(this.data.bankCardPhoto);
				this.images.push(this.data.selfie);
				this.$previewRefresh(); //
			}
		},

		/*重新收集更新照片1234-前后银行自己*/
		collectCustomerImage() {
			this.$emit('collectImage', this.index + 1);
			this.showAllImages = true;
		},

		async picOcr() {
			if (this.index === 0) {
				console.log(this.data.frontPhoto);
				if (this.data && this.data.frontPhoto) {
					try {
						let data = await this.ocrPic(this.data.frontPhoto, 'face');
						data.type = 'face';
						this.ocrData = data;
						this.showOcrView = true;
					} catch (e) {
						this.$Message.error(this.$t('pic.failed'));
					}
				} else {
					this.$Message.warning(this.$t('pic.empty'));
				}
			} else if (this.index === 1) {
				console.log(this.data.backPhoto);
				if (this.data && this.data.backPhoto) {
					try {
						let data = await this.ocrPic(this.data.backPhoto, 'back');
						data.type = 'back';
						this.ocrData = data;
						this.showOcrView = true;
					} catch (e) {
						this.$Message.error(this.$t('pic.failed'));
					}
				} else {
					this.$Message.warning(this.$t('pic.empty'));
				}
			} else {
				this.$Message.warning(this.$t('pic.notSupport'));
			}
		},

		async ocrPic(url, side) {
			return new Promise((resolve, reject) => {
				ocrPicture(url, side)
					.then(resp => {
						console.log(resp, resp.data.Data.FrontResult);
						if (side === 'face') {
							resolve(resp.data.Data.FrontResult);
						} else if (side === 'back') {
							resolve(resp.data.Data.BackResult);
						}
					})
					.catch(error => {
						console.log(error);
						reject(error ? error : error.response);
					});
			});
		},

		/*单个大图预览*/
		showBig() {
			// eslint-disable-next-line no-unused-vars
			this.$preview.on('imageLoadComplete', (e, item) => {
				console.log(this.$preview.self);
			});
		},

		takephoto() {
			this.$emit('takephoto');
		},
		handsign() {
			this.$emit('handsign');
		},

		handsignagain() {
			this.$emit('handsignagain');
		},
		uploadfile() {
			this.$emit('uploadfile');
		},
		addwater() {
			this.$emit('addwater');
		},

		addbackgroup() {
			this.$emit('addbackgroup');
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	padding-top: 14px;
	padding-left: 16px;
}

.head {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center;
}

.headTitle {
	width: 100%;
	height: 40px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	line-height: 40px;
	text-align: left;
	margin-left: 10px;
}

.customerinfo {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	box-shadow: 1px 1px 8px 1px rgba(44, 137, 234, 0.13);
	border-radius: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}

.line {
	width: 2px;
	height: 25px;
	background: rgba(44, 137, 234, 1);
	border-radius: 1px;
	margin-left: 20px;
	margin-top: 8px;
}

.img {
	width: 40px;
	height: 40px;
}

.ct1 {
	width: 80px;
	height: 10px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 10px;
	margin-left: 20px;
	text-align: left;
}

.ct2 {
	/*width:80px;*/
	height: 10px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 10px;
	left: 0px;
	text-align: left;
}

.opsf {
	width: 100%;
	height: 40px;
	background: rgba(247, 248, 249, 1);
	border-radius: 0px 0px 2px 2px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center;
}

.truefalse {
	margin-left: 20px;
	font-family: PingFang SC;
	margin-top: 10px;
	color: rgba(58, 152, 255, 1);
	margin-right: 0px;
	width: 90px;
	text-align: left;
}

.file {
	width: 100%;
	height: 280px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
	border-radius: 10px;
}

.workflow_content {
	width: 100%;
	height: 140px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
	border-radius: 10px;
}

.pic {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 100%;
	box-sizing: content-box;
}

.icon {
	width: 40%;
	margin: 10px;
	min-height: 80px;
	max-height: 80px;
	background: rgba(246, 246, 246, 1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	user-select: none;
}

.allow {
	cursor: pointer;
}

.disabled {
	cursor: not-allowed;
}

.pic_t {
	text-align: center;
	width: 100%;
	height: 20px;
}

.iconone {
	width: 90%;
	margin-left: 5%;
	height: 100px;
	margin-top: 20px;
	background: rgba(246, 246, 246, 1);
}

.userImage {
	object-fit: contain;
	/*transform:rotate(90deg);*/
	/*-ms-transform:rotate(7deg); !* IE 9 *!*/
	-webkit-transform: rotate(360deg); /* Safari and Chrome */
	transform: rotate(360deg);
}

.bigimage {
	object-fit: contain;
	/*transform:rotate(90deg);*/
	/*-ms-transform:rotate(7deg); !* IE 9 *!*/
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

.op {
	width: 90%;
	margin-left: 5%;
}
/* 2011-11-16 修改采集信息按钮样式*/
.op-btn {
	display: flex;
}

.opbtn {
	width: 40%;
	height: 40px;
	margin: 10px;
	background: rgba(246, 246, 246, 1);
	line-height: 40px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(121, 121, 121, 1);
	-moz-user-select: none; /* Firefox私有属性 */
	-webkit-user-select: none; /* WebKit内核私有属性 */
	-ms-user-select: none; /* IE私有属性(IE10及以后) */
	-khtml-user-select: none; /* KHTML内核私有属性 */
	-o-user-select: none; /* Opera私有属性 */
	user-select: none; /* CSS3属性 */
	cursor: pointer;
}

.filetitle {
	/* width: 120px; */
	height: 30px;
	border: 1px solid rgba(184, 184, 184, 1);
	line-height: 30px;
	margin-top: 10px;
	margin-right: 74%;
	cursor: pointer;
	user-select: none;
}

.input-ul li {
	display: flex;
	justify-content: space-around;
	padding: 6px;
}

ul {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}
</style>
